<template>
	<view class="content">
		<u-sticky>
			<door-navbar></door-navbar>
		</u-sticky>
		<!--<view class="share">
			<view class="share_canvas">
				<view class="canvasBox" v-if="canvasImg" >
				    <view class="canvasItem">
				        <image mode="widthFix" style="width:343px;height:471px" :src="canvasImg"></image>
				    </view>
				</view>
				<view v-else>
					<canvas class="f__canvas" style="width:343px;height:471px"  canvas-id="shareCanvas" id="shareCanvas"></canvas>
					<canvas class="f__canvas" style="width:300px;height:300px;" canvas-id="qrcode" id="qrcode"></canvas>
				</view>
			</view>
		</view>-->
		<view class="team">
			<view class="team_count">
				<view class="team_count_invitation">
					<view class="right">
						<view class="count">{{invitationTotal}}</view>
						<view class="tip">总转发次数</view>
					</view>
				</view>
				<view style="padding: 22px 16px;color: #ccc;">|</view>
				<view class="team_count_real">
					<view class="right">
						<view class="count">{{realNameTotal}}</view>
						<view class="tip">总分享次数</view>
					</view>
				</view>
			</view>
			<view class="team_list">
				<view class="team_list_title">
					<view style="display: flex;align-items: center;justify-content: center;">
						<u-icon name="../../static/image/detail_name_left.svg" size="40" width="52rpx" height="8rpx"
							color="#FF7D51"></u-icon>
						<text style="margin: 0 30rpx;">我的推广记录</text>
						<u-icon name="../../static/image/detail_name_right.svg" size="40" width="52rpx" height="8rpx"
							color="#FF7D51"></u-icon>
					</view>
				</view>
				<scroll-view class="team_list_scroll" @scrolltolower="scrolltolower" :scroll-y="true"
					v-if="list.length > 0">
					<view class="team_list_scroll_item" v-for="(item,index) in list" :key="`item${index}`">
						<view class="team_list_scroll_item_right">
							<view class="right_info">
								<view class="name">{{item.userName}}</view>
								<view class="phone">{{item.phone}}</view>
							</view>
						</view>
						<u--image :src="`${item.isCert == 1?'../../static/image/cert_active.svg':'../../static/image/cert_not.svg'}`" radius="50" width="152rpx" height="34rpx"
							bgColor="#323558"></u--image>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import _canvas from '@/uni_modules/fan-canvas/canvasUtils';// 加载万能绘制方法
	import { saveImg,qrcodeCanvas } from '@/uni_modules/fan-canvas/plugins/utils';// 需要保存图片和生成二维码可以引用此文件
	export default {
		data() {
			return {
				canvasImg:'',    //生成的海报图片
				qrcodeImg:'',    //二维码本地图片
				goodsImg:'./static/image/canvas_share.png',
				content:'canvas万能制作方法，新手简单入手，易学，一天掌握canvas制作。绘制矩形方法、加载图片方法、绘制圆形头像方法、绘制图片cover不变形、文本自定义换行超出省略、绘制圆角按钮等方法。组合起来用，基本海报都能绘制。',   //内容
				current: 0,
				invitationTotal: 0,
				realNameTotal: 0,
				page: 1,
				list: [],
				qrCodeText: '',
				qrSize: 0,
				posterImgUrl: '',
				posterImg: "",
				userInfo:{},
				isMicromessenger:false
			};
		},
		created() {
			
		},
		async onLoad() {
			this.getUserTeamTotal();
			this.getUserTeamList();
		},
		async onReady(e) {
			let ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == "micromessenger"){
				this.isMicromessenger = true
			}
		},
		methods: {
			async getUserTeamTotal() {
				/*let userInfo = await this.$api.getUserInfo();
				this.$u.api.getUserTeamTotal({
						userId: userInfo.userId
					})
					.then(res => {
						if (res.code == 200) {
							this.invitationTotal = res.data.invitationTotal;
							this.realNameTotal = res.data.realNameTotal;
						}
					})*/
			},
			async getUserTeamList() {
				/*let userInfo = await this.$api.getUserInfo();
				let res = await this.$u.api.getUserTeamList({
					pageNo: this.page,
					pageSize: 100,
					userId: userInfo.userId
				})
				let list = JSON.parse(JSON.stringify(this.list));
				if (this.page == 1) {
					this.$set(this, 'list', res.data.pageData);
				} else {
					if (list.length < res.data.totalDataNum) {
						list = list.concat(res.data.pageData)
						this.$set(this, 'list', list);
					} else {
						this.$set(this, 'page', this.page - 1);
					}
				}*/
			},
			scrolltolower() {
				this.page++;
				this.getUserTeamList()
			},
		}
	}
</script>

<style lang="scss">
	.content {
		// padding-top: 108rpx;
		.canvasBox{
		    .canvasItem {
		        /* #ifndef APP-NVUE */
		        display: flex;
		        /* #endif */
		        justify-content: center;
		        .img {
		            width: 50%;
		        }
		    }
		}   
		.tabs {
			width: 100%;
			background-color: #eee;
			padding: 16rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 20rpx;
			position: relative;
			font-size: 28rpx;
			box-sizing: border-box;
			margin-bottom: 40rpx;

			&_item {
				width: 300rpx;
				height: 84rpx;
				text-align: center;
				color: #8588AA;
				line-height: 84rpx;
				border-radius: 20rpx;
			}
		}

		.active {
			background-color: #1cc7c2;
			color: #fff;
		}

		

		.team {
			background-color: #fff;border-radius: 15px;margin-top: 36rpx;
			box-shadow: 0px 8px 32px #00000014, 0px 2px 20px #0000000a;
			&_list{
				width: 686rpx;
			}
			&_count {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				color: #333;
				// &_invitation {
				// 	background: #1cc7c2;
				// }

				// &_real {
				// 	background: #F87C58;
				// }

				&_invitation,
				&_real {
					width: 314rpx;
					padding: 40rpx 30rpx;
					display: flex;
					align-items: center;
					border-radius: 20rpx;
					text-align: center;
					.right {
						// margin-left: 16rpx;
						margin: 0 auto;
						.title {
							font-size: 28rpx;
							line-height: 44rpx;
							margin-bottom: 8rpx;
							text-align: center;
						}

						.count {
							font-size: 44rpx;
							line-height: 56rpx;
						}
						.tip{
							font-size: 24rpx;
							color: #999;
						}
					}
				}
			}

			&_list {
				width: 100%;
				&_title {
					width: 100%;
					text-align: center;
					font-size: 28rpx;
					padding-bottom: 35rpx;
					color: #333 !important;
					font-weight: bold;
				}

				&_scroll {
					width: 100%;
					height: 30vh;
					color: #333 !important;
					&_item {
						padding: 0 48rpx;
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 35rpx;
						color: #333 !important;
						&_right {
							display: flex;
							align-items: center;
							color: #333 !important;
							.right_info {
								// margin-left: 35rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								height: 70rpx;

								.name {
									font-size: 24rpx;
									font-weight: bold;
									color: #333 !important;
								}

								.phone {
									font-size: 20rpx;
									color: #666;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
